<!DOCTYPE html>
<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
<!--
Copyright 2006 Google Inc. All Rights Reserved.
-->
<head>
<title>Closure Unit Tests - goog.dom.forms</title>
<script src="../base.js"></script>
<script>
  goog.require('goog.dom');
  goog.require('goog.dom.forms');
  goog.require('goog.testing.jsunit');
</script>
</head>
<body>
  <!-- empty div to test against -->
  <div id="testdiv1"></div>

  <form id="testform1" onsubmit="return false">

    <!-- text input with one value -->
    <input id="in1" name="in1" value="foo">

    <!-- text inputs with two values -->
    <input id="in2" name="in2" value="bar">
    <input id="in2" name="in2" value="baaz">

    <!-- empty text input -->
    <input id="in3" name="in3" value="">

    <!-- password -->
    <input id="pass" name="pass" type="password" value="bar">

    <!-- textarea -->
    <textarea id="textarea1" name="textarea">foo bar baz</textarea>

    <!-- select single -->
    <select id="select1" name="select1">
      <option value="1" selected>one</option>
      <option value="2">two</option>
    </select>

    <!-- select multiple -->
    <select id="select2" name="select2" multiple=true>
      <option value="a" selected>A</option>
      <option value="b">B</option>
      <option value="c" selected>C</option>
    </select>

    <!-- select no value -->
    <select id="select3" name="select3">
      <option></option>
      <option value="1">one</option>
      <option value="2">two</option>
    </select>

    <!-- checkboxes -->
    <fieldset id="testfieldset1">
      <legend id="testlegend1">Checkboxes</legend>
      <input id="checkbox1" type="checkbox" name="checkbox1" checked>
      <input id="checkbox2" type="checkbox" name="checkbox2">
    </fieldset>

    <!-- radio buttons -->
    <fieldset>
      <legend>Radio Buttons</legend>
      <input id="radio1" type="radio" name="radio" value="X" checked>
      <input id="radio2" type="radio" name="radio" value="Y">
    </fieldset>

    <fieldset>
      <legend>Radio Buttons</legend>
      <input id="radio3" type="radio" name="radio2" value="X">
      <input id="radio4" type="radio" name="radio2" value="Y" checked>
    </fieldset>

    <!-- button -->
    <button id="button" name="button" type="button" value="button" onclick="testSetValueSelectMultiple()">button</button>

    <!-- submit -->
    <input id="submit" type="submit" name="submit" value="submit">

    <!-- reset -->
    <input id="reset" type="reset" name="reset" value="reset">

  </form>

  <form id="testform2">
    <input type="file" name="file">
  </form>

  <form id="testform3">
    <!-- text input -->
    <input id="in4" name="in4">

    <!-- textarea -->
    <textarea id="textarea2" name="textarea"></textarea>

    <!-- select single -->
    <select id="select4" name="select1">
      <option value="1">one</option>
      <option value="2">two</option>
    </select>

    <!-- select multiple -->
    <select id="select5" name="select5" multiple=true>
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
    </select>

    <!-- radio -->
    <input id="radio3" type="radio" name="radio3" value="Z">

    <!-- checkbox -->
    <input id="checkbox2" type="checkbox" name="checkbox2">


    <!-- select multiple no value -->
    <select id="select6" name="select6" multiple=true>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>

    <!-- select with empty value -->
    <select id="select7" name="select7">
      <option value="">Empty</option>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  </form>

<script>

  function testGetFormDataString() {
    var el = goog.dom.$('testform1');
    var result = goog.dom.forms.getFormDataString(el);
    assertEquals('in1=foo&in2=bar&in2=baaz&in3=&pass=bar&textarea=foo%20bar%20baz&select1=1&select2=a&select2=c&select3=&checkbox1=on&radio=X&radio2=Y', result);
  }

  function testGetFormDataMap() {
    var el = goog.dom.$('testform1');
    var result = goog.dom.forms.getFormDataMap(el);

    assertArrayEquals(['foo'], result.get('in1'));
    assertArrayEquals(['bar', 'baaz'], result.get('in2'));
    assertArrayEquals(['1'], result.get('select1'));
    assertArrayEquals(['a', 'c'], result.get('select2'));
    assertArrayEquals(['on'], result.get('checkbox1'));
    assertUndefined(result.get('select6'));
    assertUndefined(result.get('checkbox2'));
    assertArrayEquals(['X'], result.get('radio'));
    assertArrayEquals(['Y'], result.get('radio2'));
  }

  function testHasFileInput() {
    var el = goog.dom.$('testform1');
    assertFalse(goog.dom.forms.hasFileInput(el));
    el = goog.dom.$('testform2');
    assertTrue(goog.dom.forms.hasFileInput(el));
  }


  function testGetValueOnAtypicalValueElements() {
    var el = goog.dom.$('testdiv1');
    var result = goog.dom.$F(el);
    assertNull(result);
    var el = goog.dom.$('testfieldset1');
    var result = goog.dom.$F(el);
    assertNull(result);
    var el = goog.dom.$('testlegend1');
    var result = goog.dom.$F(el);
    assertNull(result);
  }

  function testHasValueInput() {
    var el = goog.dom.$('in1');
    var result = goog.dom.forms.hasValue(el);
    assertTrue(result);
  }

  function testHasValueByNameInput() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.hasValueByName(form, 'in1');
    assertTrue(result);
  }

  function testHasValueInputEmpty() {
    var el = goog.dom.$('in3');
    var result = goog.dom.forms.hasValue(el);
    assertFalse(result);
  }

  function testHasValueByNameEmpty() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.hasValueByName(form, 'in3');
    assertFalse(result);
  }

  function testHasValueRadio() {
    var el = goog.dom.$('radio1');
    var result = goog.dom.forms.hasValue(el);
    assertTrue(result);
  }

  function testHasValueByNameRadio() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.hasValueByName(form, 'radio');
    assertTrue(result);
  }

  function testHasValueRadioNotChecked() {
    var el = goog.dom.$('radio2');
    var result = goog.dom.forms.hasValue(el);
    assertFalse(result);
  }

  function testHasValueByNameRadioNotChecked() {
    var form = goog.dom.$('testform3');
    var result = goog.dom.forms.hasValueByName(form, 'radio3');
    assertFalse(result);
  }

  function testHasValueSelectSingle() {
    var el = goog.dom.$('select1');
    var result = goog.dom.forms.hasValue(el);
    assertTrue(result);
  }

  function testHasValueByNameSelectSingle() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.hasValueByName(form, 'select1');
    assertTrue(result);
  }

  function testHasValueSelectMultiple() {
    var el = goog.dom.$('select2');
    var result = goog.dom.forms.hasValue(el);
    assertTrue(result);
  }

  function testHasValueByNameSelectMultiple() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.hasValueByName(form, 'select2');
    assertTrue(result);
  }

  function testHasValueSelectNotSelected() {
    // select without value
    var el = goog.dom.$('select3');
    var result = goog.dom.forms.hasValue(el);
    assertFalse(result);
  }

  function testHasValueByNameSelectNotSelected() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.hasValueByName(form, 'select3');
    assertFalse(result);
  }

  function testHasValueSelectMultipleNotSelected() {
    var el = goog.dom.$('select6');
    var result = goog.dom.forms.hasValue(el);
    assertFalse(result);
  }

  function testHasValueByNameSelectMultipleNotSelected() {
    var form = goog.dom.$('testform3');
    var result = goog.dom.forms.hasValueByName(form, 'select6');
    assertFalse(result);
  }

  // TODO: make this a meaningful selenium test
  function testSetDisabledFalse() {
  }
  function testSetDisabledTrue() {
  }

  // TODO: make this a meaningful selenium test
  function testFocusAndSelect() {
    var el = goog.dom.$('in1');
    goog.dom.forms.focusAndSelect(el);
  }

  function testGetValueInput() {
    var el = goog.dom.$('in1');
    var result = goog.dom.$F(el);
    assertEquals('foo', result);
  }

  function testSetValueInput() {
    var el = goog.dom.$('in3');
    goog.dom.forms.setValue(el, 'foo');
    var result = goog.dom.$F(el);
    assertEquals('foo', result);

    // unset
    goog.dom.forms.setValue(el);
  }

  function testGetValuePassword() {
    var el = goog.dom.$('pass');
    var result = goog.dom.$F(el);
    assertEquals('bar', result);
  }

  function testGetValueByNamePassword() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.getValueByName(form, 'pass');
    assertEquals('bar', result);
  }

  function testGetValueTextarea() {
    var el = goog.dom.$('textarea1');
    var result = goog.dom.$F(el);
    assertEquals('foo bar baz', result);
  }

  function testGetValueByNameTextarea() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.getValueByName(form, 'textarea1');
    assertEquals('foo bar baz', result);
  }

  function testSetValueTextarea() {
    var el = goog.dom.$('textarea2');
    goog.dom.forms.setValue(el, 'foo bar baz');
    var result = goog.dom.$F(el);
    assertEquals('foo bar baz', result);
  }

  function testGetValueSelectSingle() {
    var el = goog.dom.$('select1');
    var result = goog.dom.$F(el);
    assertEquals('1', result);
  }

  function testGetValueByNameSelectSingle() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.getValueByName(form, 'select1');
    assertEquals('1', result);
  }

  function testSetValueSelectSingle() {
    var el = goog.dom.$('select4');
    goog.dom.forms.setValue(el, '2');
    var result = goog.dom.$F(el);
    assertEquals('2', result);
    // unset
    goog.dom.forms.setValue(el);
    var result = goog.dom.$F(el);
    assertNull(result);
  }

  function testSetValueSelectSingleEmptyString() {
    var el = goog.dom.$('select7');
    // unset
    goog.dom.forms.setValue(el);
    var result = goog.dom.$F(el);
    assertNull(result);
    goog.dom.forms.setValue(el, '');
    result = goog.dom.$F(el);
    assertEquals('', result);
  }

  function testGetValueSelectMultiple() {
    var el = goog.dom.$('select2');
    var result = goog.dom.$F(el);
    assertArrayEquals(['a', 'c'], result);
  }

  function testGetValueSelectMultipleNotSelected() {
    var el = goog.dom.$('select6');
    var result = goog.dom.$F(el);
    assertNull(result);
  }

  function testGetValueByNameSelectMultiple() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.getValueByName(form, 'select2');
    assertArrayEquals(['a', 'c'], result);
  }

  function testSetValueSelectMultiple() {
    var el = goog.dom.$('select5');
    goog.dom.forms.setValue(el, ['a', 'c']);
    var result = goog.dom.$F(el);
    assertArrayEquals(['a', 'c'], result);

    goog.dom.forms.setValue(el, 'a');
    var result = goog.dom.$F(el);
    assertArrayEquals(['a'], result);

    // unset
    goog.dom.forms.setValue(el);
    var result = goog.dom.$F(el);
    assertNull(result);
  }

  function testGetValueCheckbox() {
    var el = goog.dom.$('checkbox1');
    var result = goog.dom.$F(el);
    assertEquals('on', result);
    var el = goog.dom.$('checkbox2');
    var result = goog.dom.$F(el);
    assertNull(result);
  }

  function testGetValueByNameCheckbox() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.getValueByName(form, 'checkbox1');
    assertEquals('on', result);
    result = goog.dom.forms.getValueByName(form, 'checkbox2');
    assertNull(result);
  }

  function testGetValueRadio() {
    var el = goog.dom.$('radio1');
    var result = goog.dom.$F(el);
    assertEquals('X', result);
    var el = goog.dom.$('radio2');
    var result = goog.dom.$F(el);
    assertNull(result);
  }

  function testGetValueByNameRadio() {
    var form = goog.dom.$('testform1');
    var result = goog.dom.forms.getValueByName(form, 'radio');
    assertEquals('X', result);

    result = goog.dom.forms.getValueByName(form, 'radio2');
    assertEquals('Y', result);
  }

  function testGetValueButton() {
    var el = goog.dom.$('button');
    var result = goog.dom.$F(el);
    assertEquals('button', result);
  }

  function testGetValueSubmit() {
    var el = goog.dom.$('submit');
    var result = goog.dom.$F(el);
    assertEquals('submit', result);
  }

  function testGetValueReset() {
    var el = goog.dom.$('reset');
    var result = goog.dom.$F(el);
    assertEquals('reset', result);
  }
</script>
</body>
</html>
